<template>
	<view v-if="IsShow">
		<view class="QS-tabs-box">
			<QSTabs 
			ref="tabs" 
			:tabs="tabs" 
			animationMode="line3" 
			:current="current" 
			@change="change"
			activeColor="#F9AC2B"
			lineColor="#F9AC2B"
			swiperWidth="750">
			</QSTabs>
		</view>
		<swiper 
		:style="{'height': '1200rpx'}" 
		:current="swiperCurrent" 
		@transition="transition"
		@animationfinish="animationfinish">
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" >
					<view class="scroll-items">
						<view class="scroll-item" style="padding: 0; border:0">
							<view class="scroll-item-text-box">
								<view style="margin: 10% auto;">
									<image @longpress="saveImg" style="width: 400upx;height: 400upx;" :src='qrCode'></image>
								</view> 
								<view style="text-align: center;padding: 10px;color: #CCC;">长按二维码保存到相册</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</swiper-item>
			<swiper-item class="swiper-item">
				<scroll-view scroll-y style="height: 100%;width: 100%;" >
					<view class="scroll-items">
						<view class="scroll-item" v-if="showList" style="border:0">
							<view class="scroll-item-text-box">
								<view class="list">
									<view class='listitem' v-for="(item ,index) in List" :key="index">
										<image :src="item.avatar"></image>
										{{item.nickname}}（{{item.profession.title}}）
									</view>
								</view>
							</view>
						</view>
						<view style="margin: 50% auto;" v-if="nodata">暂无数据</view>
					</view>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	import QSTabs from '@/components/QS-tabs/QS-tabs.vue';
	import api from '@/pages/utils/api.js';
	const Sys = uni.getSystemInfoSync();
	const wH = Sys.windowHeight;
	export default {
		components: {
			QSTabs
		},
		data() {
			return {
				rm:88,
				tabs:['我的二维码','我的人脉'],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				List:[],
				nodata:false,
				showList:false,
				qrCode:'',
				IsShow:false
			}
		},
		onLoad() {
			this.getMyContacts();
			this.getMyQrCode();
		},
		onShow() {
			if(uni.getStorageSync('checked_status') == 1){
				uni.navigateTo({
					url: '/pages/index/checked'
				});
				return;
			};
			this.IsShow = true
		},
		methods: {
			change(index) {
				this.swiperCurrent = index; 
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({detail: { current }}) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			},
			//获取我的人脉信息列表
			getMyContacts:function(){
				var vm = this;
				api.getMyContacts({
					page:1,
					pagesize:20
				}).then(data=>{
					if(data.code == 1){
						if(data.data.total ==0){
							vm.nodata = true
						}else{
							vm.showList = true;
							vm.List = data.data.list;
							vm.tabs[1] = '我的人脉('+data.data.total+')';
						}
					}
				})
			},
			getMyQrCode:function(){
				var vm = this;
				api.getMyQrCode({
					
				}).then(data=>{
					if(data.code == 1){
						vm.qrCode = 'https://qiuzhi.lalaluowang.club'+data.data;
					}
				})
			},
			saveImg:function(){
				let that=this
				    wx.getSetting({
				      success(res) {
				        //未授权 先授权 然后保存
				        if (!res.authSetting['scope.writePhotosAlbum']) {
				          wx.authorize({
				            scope: 'scope.writePhotosAlbum',
				            success(re) {
							  let imgUrl = that.qrCode;
				              that.saveToBlum(imgUrl);
				            }
				          })
				        }else{
				         //已授 直接调用保存到相册方法
						 let imgUrl = that.qrCode;
				          that.saveToBlum(imgUrl);
				        }
				      }
				    });
			},
			//长按保存二维码
			saveToBlum:function(imgUrl){
			    wx.downloadFile({
			      url:imgUrl,
			      success: function (res) {
			        wx.saveImageToPhotosAlbum({
			          filePath: res.tempFilePath,
			          success(result) {
			            wx.showToast({
			              title: '保存成功',
			              icon: 'success'
			            })
			          }
			        })
			      }
			    });
			  }
		}
	}
</script>

<style scoped>
	.QS-tabs-box{
		width: 100%;
		position: sticky;
		top: 0;
		z-index: 10;
		background-color: white;
	}
	.swiper-item{
		background-color: #fff;
	}
	.scroll-items{
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	.scroll-item{
		margin-top: 15rpx;
		padding: 25rpx;
		background-color: white;
		border-radius: 8rpx;
		width: 100%;
		display: flex;
		flex-direction: row;
		border: 1px solid #f8f8f8;
	}
	.scroll-item-image-box{
		flex-grow: 0;
	}
	.scroll-item-text-box{
		flex-grow: 1;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: 28rpx;
	}
	.scroll-item-image{
		border-radius: 4rpx;
		width: 180rpx;
		height: 150rpx;
	}
	
	
.list .listitem{
	display: flex;
	align-items: center;
	margin: 30upx 0;
	border-bottom: 1px solid #EEE;
	padding: 20upx 0;
}
.list .listitem image{
	width: 90upx;
	height: 90upx;
	border-radius: 50%;
	margin: 0 30upx 0 0;
}
</style>